<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .lan{
            width: 100%;
            height: 100px;
            background-color: #02b6fd;
        }
        .lan .toubu{
            font-size: 30px;
            font-weight: bold;
            color: #fff;
        }
        .lan .secher{
            position: relative;
        }
        .lan .secher input{
            width: 90%;
            height: 30px;
            border: none;
            align-items: center;
            text-align: center;
            border-radius: 20px;
            position: absolute;
            top: 10px;
            left: 18px;
        }
        .lunbo{
            width: 90%;
            height: 70px;
            background-color: #02b6fd;
            border-radius: 10px;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .caini{
            font-size: 20px;
            font-weight: 600;
            line-height: 30px;
        }
        .sp{
            display: flex;
            justify-content: space-between;
        }
        .sp .name{
            width: 25%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        .xiaob{
            display: flex;
            justify-content: space-around;
        }
        .xiaob .kk{
            width: 22%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border-radius: 4px;
            background-color: #f0f0f0;
        }
        #app .sp .active{
           font-size: 18px;
           font-weight: 600;
        }
        .caidan{
            display: flex;
            margin-top: 5px;
        }
        .caidan .tu{
            width: 120px;
            height: 120px;
            background-color: blueviolet;
        }
        #app .bidu{
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 10px;
            border-top: 1px solid #ccc;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 40px;
        }
        #app .bidu .di{
            width: 33.333%;
            height: 40px;
        }
        #app .bidu .act{
          font-size: 18px;
          color: #02b6fd;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="lan">
            <div class="toubu">饿了么</div>
            <div class="secher">
                <input type="text" placeholder="输入商家，商品名称">
            </div>
        </div>

        <div class="lunbo"></div>
        <div class="caini">猜你喜欢</div>
        <div class="xiangqin">
            <div class="biao"></div>
        </div>
        <div class="sp">
            <div :class ="{active:currentIndex == index}" class="name" @click = "handclick(index)" v-for="(item,index) in arr"> {{item.name}} </div>
        </div>
        <div class="xiaob">
            <div class="kk"  v-for="(item,index) in str"> {{item.kk}} </div>
        </div>
        <div class="caidan">
            <div class="tu">
               
            </div>
            <div class="jie">
                <h3 class="bb"> {{bb}} </h3>
                <p class="wu" v-for ="(item,index) in stt" > {{item.wu}} </p>
                <div class="fen"> {{fen}} </div>
                    <span class="bin" v-for = "(item,index) in tre"> {{item.bin}} </span>
            </div>
        </div>
        <div class="bidu">
            <div :class="{act:current == index}" @click="hand(index)" class="di" v-for="(item,index) in tutu">
                {{item.di}}
            </div>
        </div>
    </div>
    

    <script src="./vue-2.5.21.js"></script>
    <script src="./1.排序作业.js"></script>
</body>
</html>